<template>
  <div class="todo-page">
    <van-sticky>
      <van-nav-bar
        title="待办事项"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1" readonly @click.stop="toTodo">
          <!-- 折叠面板标题 -->
          <template #title>
            <div>
              待办事项
              <van-badge :content="qty || 0" :color="filterColor(qty)" />
            </div>
          </template>
        </van-collapse-item>

        <van-collapse-item name="2" title="预约" readonly> </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import { getUserInfo, refreshTodoData } from '../../util/business-util'
import { defineComponent, ref, onBeforeMount, computed } from 'vue'
import { useStore } from '/@/store'
export default defineComponent({
  components: {},
  setup() {
    const { commit, state } = useStore()

    const qty = computed(() => state.todoData.qty)

    // 待办列表数量
    const todoList = computed(() => state.todoData.data)

    onBeforeMount(async () => {
      // 获取用户信息
      let userValue = await getUserInfo(commit, state, state.user.userId, false)
      refreshTodoData(commit, userValue) // 刷新待办事项数量
    })

    return {
      activeNames: [],
      qty,
      todoList,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'Me',
      })
    },
    toTodo() {
      this.$router.push({
        name: 'Todo',
      })
    },
    // 根据数量返回颜色
    filterColor(qty: number | string) {
      // 待办数量区分颜色
      const colorMap = [
        {
          range: [0, 0], // 数量范围
          color: '#808080', // 颜色
        },
        {
          range: [1, 10], // 数量范围
          color: '#FFA500', // 颜色
        },
        {
          range: [11, 99999999], // 数量范围
          color: '#FF0000', // 颜色
        },
      ]

      // 过滤数据
      const data = colorMap.find((c) => {
        return Number(qty) >= c.range[0] && Number(qty) <= c.range[1]
      })

      return (data && data.color) || ''
    },
  },
})
</script>

<style lang="less" scoped>
.todo-page {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 50px;
}
</style>
